<script setup lang="ts">
import type { AxiosResData, ChannelItem, ChannelResData } from "@/types";
import axios from "axios";
import { onMounted, ref } from "vue";
import { useChannelStore } from "@/stores/channel";
const store = useChannelStore();
// //父传子Prop,定义channelId来接收
// defineProps<{
//   channelId: number;
// }>();

// //子传父Emits,定义一个Emits,用'':[]的格式,把channelId回传给父组件
// const emits = defineEmits<{
//   "updata:channeId": [channelId: number];
// }>();
//定义数据
const list = ref<ChannelItem[]>([]);
const getData = async () => {
  const res = await axios.get<AxiosResData<ChannelResData>>(
    "http://geek.itheima.net/v1_0/channels"
  );
  list.value = res.data.data.channels;
};
//onMounted相当于AboutToAppear生命周期
onMounted(() => {
  getData();
});
</script>
<!-- 把父组件传过来的channelId传给子组件item.id -->
<!-- active:channelId === item.id -->
<!-- 监听子组件传过来的channelId,并把值回传给父组件 -->
<!-- @click="emits('updata:channeId',item.id)" -->
 <!-- :class="{ active: channelId === item.id }" -->
  <!-- @click="emits('updata:channeId', item.id)" -->
<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        
        :class="{ active:store.channelId === item.id }"

        href="javascript:;"
        v-for="(item, i) in list"
        :key="item.id"
        @click="store.updataChannelId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
